<template>
	<view class="body" @click="hideState" v-show="initState">
		<!-- 用户头像信息区域 -->
		<view class="headerBox">
			<view style="position: fixed;">
				<return-text text="个人资料" :type="0"></return-text>
			</view>
			<!-- 头像区域 -->
			<view class="header" :style="{marginTop:headerTop +'px'}">
				<van-image width="260rpx" height="260rpx" fit="cover" round @click="previewAvatar"
					:src="editData.userAvatar ? editData.userAvatar : '/static/images/userHeaderDefault.jpg'"
					use-loading-slot lazy-load></van-image>
				<image mode="widthFix" class="changeHeaderImg" src="../../static/images/change_header.png"
					@click="changeHeader" />
			</view>
			<!-- 名称区域 -->
			<view class="userName">
				<view v-if="state.userNameState">
					<input auto-focus="true" maxlength="6" type="text" @click.stop='' v-model.trim="editData.userName"
						class="userNameInput" />
				</view>
				<view v-else-if="!state.userNameState" class="userNameShow">
					<text>{{editData.userName}}</text>
					<i class="iconfont icon-xiugai" @click.stop="showUserNameInput"
						:style="{color:'#ffffff',fontWeight:'bold'}"></i>
				</view>
			</view>
			<!-- 个性签名区域 -->
			<view class="userSignature">
				<view v-if="state.userSignatureState">
					<input auto-focus="true" maxlength="15" type="text" @click.stop=''
						v-model.trim="editData.userSignature" class="userSignatureInput" />
				</view>
				<view v-else-if="!state.userSignatureState" class="userSignatureShow">
					<text>{{editData.userSignature}}</text>
					<i class="iconfont icon-xiugai" @click.stop="showUserSignatureInput"
						:style="{color:'#ffffff',fontWeight:'bold'}"></i>
				</view>
			</view>
		</view>
		<!-- 弧状区域占位 -->
		<view class="headerFooter"></view>
		<!-- 内容区域 -->
		<view class="content">
			<!-- 用户ID -->
			<view class="contentItem">
				<view class="contentItemLeft">用户ID</view>
				<view class="contentItemRight">
					<text>{{userObj.id}}</text>
				</view>
			</view>
			<!-- 用户性别 -->
			<view class="contentItem">
				<view class="contentItemLeft">性别</view>
				<view class="contentItemRight">
					<text>{{editData.userSex == 0 ? '保密' : editData.userSex == 1 ? '女' : '男'}}</text>
					<view style="padding:20upx 0upx 20upx 20upx" @click.stop="openOverlay">
						<i class="iconfont icon-youjiantou" :style="{color:'#666666',fontWeight:'bold'}"></i>
					</view>

				</view>
			</view>
			<!-- 用户手机号 -->
			<view class="contentItem">
				<view class="contentItemLeft">手机号</view>
				<view class="contentItemRight">
					<input v-if="state.userPhoneState" auto-focus="true" maxlength="11" type="number" @click.stop=''
						v-model.trim="editData.userPhone" class="userPhoneInput" />
					<view v-else class="contentItemRightView">
						<text>{{editData.userPhone}}</text>
						<view style="padding:20upx 0upx 20upx 20upx" @click.stop="showUserPhoneInput">
							<i class="iconfont icon-xiugai" :style="{color:'#666666',fontWeight:'bold'}"></i>
						</view>
					</view>
				</view>
			</view>
			<!-- 用户微信号 -->
			<view class="contentItem">
				<view class="contentItemLeft">微信号</view>
				<view class="contentItemRight">
					<input v-if="state.userWxState" auto-focus="true" maxlength="16" type="text" @click.stop=''
						v-model.trim="editData.userWx" class="userWxInput" />
					<view v-else class="contentItemRightView">
						<text>{{editData.userWx}}</text>
						<view style="padding:20upx 0upx 20upx 20upx" @click.stop="showUserWxInput">
							<i class="iconfont icon-xiugai" :style="{color:'#666666',fontWeight:'bold'}"></i>
						</view>
					</view>
				</view>
			</view>
			<!-- 保存按钮 -->
			<view class="saveBtn" @click="save">保存</view>
		</view>
		<!-- 选择性别 -->
		<van-overlay :show="state.selectSexStart">
			<view class="pickerBox">
				<van-picker :columns="sexList" :default-index="pickerIndex" show-toolbar title="选择性别"
					confirm-button-text="确认" cancel-button-text="取消" @cancel="hideOverlay"
					@confirm="selectSexConfirm" />
			</view>
		</van-overlay>
	</view>
</template>

<script>
	var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则验证
	import {
		baseUrl
	} from "@/baseUrl.js"
	import {
		capsuleTopHeight
	} from "../../mixins/mixins.js"
	export default {
		mixins: [capsuleTopHeight],
		data() {
			return {
				// 用户对象
				userObj: {},
				// 默认选中项
				pickerIndex: 0,
				// 性别选择列表
				sexList: ['男', '女', '保密'],
				// 状态
				state: {
					// 名称状态
					userNameState: false,
					// 手机号状态
					userPhoneState: false,
					// 微信号状态
					userWxState: false,
					// 个性签名状态
					userSignatureState: false,
					// 选择性别模态框控制
					selectSexStart: false
				},
				// 修改的数据
				editData: {
					// 修改的头像
					userAvatar: '',
					// 修改的名称
					userName: '',
					// 修改的个性签名
					userSignature: '',
					// 修改的手机号
					userPhone: '',
					// 修改的微信号
					userWx: '',
					// 修改的性别
					userSex: 0
				},
				// 初始数据
				initData: {},
				// 初始状态
				initState: false,
				// 距离
				headerTop: 0
			};
		},
		created() {
			this.userObj = uni.getStorageSync("userObj") || undefined
			this.getUserInfo()
			this.headerTop = this.capsuleTop + this.capsuleHeight
		},
		methods: {
			// 获取个人资料数据
			async getUserInfo() {
				const {
					data: result
				} = await uni.$http.get("/ym_server/user/personalInformation")
				if (result.code === 200) {
					this.editData = {
						userAvatar: result.data.data.avatar || '',
						userName: result.data.data.userName || '',
						userSignature: result.data.data.signature || '',
						userPhone: result.data.data.phoneNumber || '',
						userWx: result.data.data.wxNum || '',
						userSex: result.data.data.sex || 0
					}
					this.initData = JSON.parse(JSON.stringify(this.editData))
					setTimeout(() => {
						this.initState = true
					}, 300)
				} else {
					uni.showToast({
						title: "网络异常，稍后重试！",
						icon: "none"
					})
				}
			},
			// 更换头像
			changeHeader() {
				wx.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: ['back', 'front'],
					success: (res) => {
						const uploadFileSize = Math.floor(res.tempFiles[0].size / 1024 / 1024)
						if (uploadFileSize < 1) {
							console.log(res.tempFiles[0].tempFilePath)
							this.upload(res.tempFiles[0].tempFilePath)
						} else {
							uni.showToast({
								title: "不得超过1MB",
								icon: "none"
							})
						}
					}
				})
			},
			// 上传头像
			async upload(path) {
				uni.showToast({
					icon: "loading",
					title: "正在上传"
				})
				uni.uploadFile({
					url: baseUrl + "/ym_server/user/uploadFile",
					filePath: path,
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data",
						"token": this.userObj.token
					},
					success: async (res) => {
						if (res.statusCode === 200) {
							const fileData = JSON.parse(res.data)
							if (fileData.code === 200) {
								this.editData.userAvatar = fileData.data.url
							}
						} else {
							uni.showToast({
								title: "上传失败",
								icon: "none"
							})
						}
					},
					fail: (error) => {
						uni.showToast({
							title: "上传失败",
							icon: "none"
						})
					}
				})
			},
			// 查看头像
			previewAvatar() {
				uni.previewImage({
					current: this.editData.userAvatar, // 当前显示图片的http链接
					urls: [this.editData.userAvatar]
				})
			},
			// 显示性别选择器
			openOverlay() {
				this.hideState()
				this.state.selectSexStart = true
				this.pickerIndex = this.editData.userSex == 0 ? 2 : this.editData.userSex == 2 ? 0 : 1
			},
			// 隐藏性别选择器
			hideOverlay() {
				this.state.selectSexStart = false
			},
			// 选择性别确认
			selectSexConfirm(event) {
				const {
					value
				} = event.detail;
				const sex = value == "保密" ? 0 : value == "男" ? 2 : 1
				this.editData.userSex = sex
				this.state.selectSexStart = false
			},
			// 显示修改名称
			showUserNameInput() {
				this.hideState()
				this.state.userNameState = true
			},
			// 显示修改个性签名
			showUserSignatureInput() {
				this.hideState()
				this.state.userSignatureState = true
			},
			// 显示修改手机号
			showUserPhoneInput() {
				this.hideState()
				this.state.userPhoneState = true
			},
			// 显示修改微信号
			showUserWxInput() {
				this.hideState()
				this.state.userWxState = true
			},
			// 隐藏
			hideState() {
				this.state.userSignatureState = false
				this.state.userWxState = false
				this.state.userNameState = false
				if (this.state.userPhoneState) {
					if (!reg_tel.test(this.editData.userPhone)) {
						uni.showToast({
							title: "请正确输入你的手机号",
							icon: "none"
						})
						this.editData.userPhone = this.userObj.phoneNumber
					}
					this.state.userPhoneState = false
				}
			},
			// 保存
			async save() {
				let initData = Object.values(this.initData)
				let editData = Object.values(this.editData)
				for (let i = 0; i < initData.length; i++) {
					if (initData[i] != editData[i]) {
						const requestData = {
							avatar: this.editData.userAvatar,
							userName: this.editData.userName,
							signature: this.editData.userSignature,
							phoneNumber: this.editData.userPhone,
							wxNum: this.editData.userWx,
							sex: this.editData.userSex
						}
						const {
							data: result
						} = await uni.$http.put("/ym_server/user/personalInformation", requestData)
						if (result.code == 200) {
							uni.showToast({
								title: "保存成功",
								icon: "none"
							})
							this.userObj.avatar = this.editData.userAvatar
							this.userObj.userName = this.editData.userName
							this.userObj.sex = this.editData.userSex
							this.userObj.phoneNumber = this.editData.userPhone
							this.userObj.signature = this.editData.userSignature
							uni.setStorageSync("userObj", this.userObj)
						} else {
							uni.showToast({
								title: "保存失败",
								icon: "none"
							})
						}
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 整个大背景，最小高度为整个屏幕
	.body {
		min-height: 100vh;
		width: 100%;
		background: #ffffff;
		overflow: hidden;

		// 用户头像信息区域
		.headerBox {
			width: 100%;
			background: #3FD3D1;
			overflow: hidden;

			// 头像
			.header {
				width: 260rpx;
				height: 260rpx;
				margin: 0upx auto;
				padding-top: 58upx;
				position: relative;

				.changeHeaderImg {
					width: 60rpx;
					position: absolute;
					bottom: 5px;
					right: 8px;
				}
			}

			// 名称
			.userName {
				height: 61upx;
				margin: 48upx auto 0upx;
				width: 50%;

				.userNameInput {
					color: white;
					line-height: 61upx;
					font-size: 28upx;
					height: 100%;
					width: 100%;
					text-align: center;
				}

				.userNameShow {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						display: block;
						max-width: 90%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 36upx;
						color: white;
						line-height: 61upx;
						text-align: center;
						margin-right: 1%;
					}
				}
			}

			// 个性签名
			.userSignature {
				width: 60%;
				height: 61upx;
				margin: 16upx auto 0upx;

				.userSignatureInput {
					color: white;
					line-height: 61upx;
					font-size: 28upx;
					height: 100%;
					width: 100%;
					text-align: center;
				}

				.userSignatureShow {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						display: block;
						max-width: 90%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28upx;
						color: white;
						line-height: 61upx;
						text-align: center;
						margin-right: 1%;
					}
				}
			}
		}

		// 弧状区域占位
		.headerFooter {
			width: 110%;
			margin-left: -5%;
			height: 86upx;
			background: #3FD3D1;
			border-radius: 0upx 0upx 50% 50%;
		}

		// 内容区域
		.content {
			margin: 96upx 32upx 0upx 32upx;
			padding-bottom: 54upx;

			.contentItem {
				margin: 48upx 0upx;
				display: flex;
				height: 38upx;
				align-items: center;
				font-size: 28upx;

				.contentItemLeft {
					width: 20%;
					color: #333333;
				}

				.contentItemRight {
					width: 80%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 28upx;
						color: #333333;
					}

					.contentItemRightView {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}

				.userPhoneInput,
				.userWxInput {
					color: #999;
					line-height: 61upx;
					font-size: 28upx;
					height: 100%;
					width: 100%;
				}

				view {
					display: flex;
				}

				&:last-child {
					color: #EA7B7B;
					margin-bottom: 0upx !important;
				}
			}

			// 保存按钮
			.saveBtn {
				margin: 120upx 0upx 80upx 0upx;
				height: 96upx;
				background: #3FD3D1;
				color: #ffffff;
				font-size: 32upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		// 选择器盒子
		.pickerBox {
			position: fixed;
			bottom: 0upx;
			width: 100%;
			left: 0upx;
		}
	}
</style>
